<template>
	<view class="page-wraper">
		<customNav title1="我要报价" bgColor="#3957BF" :backIcon="true" backIconColor="white">
		</customNav>
		
		<view class="" style="background-color: #3957BF; width:100%; height:30px">
		</view>
		
		<view class="up_card">
			<view class="" style="height: 10px;"></view>
			<view class="price_title_view">
				<text class="title">车辆信息</text>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="padding-right: 10px;">
						* 求购车型
					</view>
					<view class="cell_right" style="justify-content: end; display: flex; flex:1;">
						<view class="" style="flex-direction: column; display: flex; ">
							<view class="content_text">{{objectData.model_name}}</view>
							<view class="small_text">预算：{{objectData.budget_money}}元 指导价：{{objectData.guide_price}}元</view>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 我的报价
					</view>
					<view class="cell_right" style="">
						<input 
						v-model="quotation_price" @input="limitQuotation"
						type="digit" placeholder="请输入金额" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
					<text class="unit_text">万元</text>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 订金
					</view>
					<view class="cell_right" style="">
						<input 
						v-model="deposit_price" @input="limitDeposit"
						type="digit" placeholder="请输入金额" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
					<text class="unit_text">元</text>
				</view>
				<view class="cell_line"></view>
			</view>

			<!-- <view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 车源所在地
					</view>
					<view @click="openDrawer('regionDrawer', 'region')" class="cell_right" style="">
						<input v-model="regionResult" type="text" disabled="false" class="content_text" placeholder="选择地区" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
				</view>
				<view class="cell_line"></view>
			</view> -->
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 报价联系人
					</view>
					<view class="cell_right" style="" @click="toggle('bottom')">
						<input v-model="quotation_contacts"
						 type="text" disabled="false" placeholder="选择联系人" placeholder-class="placeholder_text" style="text-align: right;"> 
						<image src="/static/right_back.png" mode="aspectFit" style="margin-left: 7px; width:7px; height:14px"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="down_card">
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						自提距离
					</view>
					<view @click="openDrawer('distanceDrawer')" class="cell_right" style="">
						<input v-model="distance" type="text" disabled="false" class="content_text" placeholder="请选择" placeholder-class="placeholder_text" style="text-align: right;">
						<image src="/static/right_back.png" mode="aspectFit" style="margin-left: 7px; width:7px; height:14px"></image>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						店保情况
					</view>
					<view @click="openDrawer('insuranceDrawer')" class="cell_right" style="">
						<input v-model="store_protection"
						type="text" disabled="false" class="content_text" placeholder="请选择" placeholder-class="placeholder_text" style="text-align: right;">
						<image src="/static/right_back.png" mode="aspectFit" style="margin-left: 7px; width:7px; height:14px"></image>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						开票类型
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox  v-model="invoicing" class='' mode="tag" :localdata="kaipiaoList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						发票
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="invoice" :localdata="faPiaoList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						手续
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="procedures" :localdata="shouxuList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						要求
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="collection_conditions" :localdata="requestList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
		
			<view class="enter_btn" style="margin: 20px 14px 0px 14px;" @click="enter()">
				确认提交
			</view>
			
			<view class="" style="width: 100%; height:20px">
				
			</view>
		</view>
		
		
		
		<!-- 抽屉 -->
		
		
		<uni-drawer ref="regionDrawer" mode="right" :mask-click="true" @change="change($event,'regionDrawer')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="drawer-title">{{regionTitle}}</view>
						<view @click="selectedItem(item, 'regionDrawer')" class="info-content" v-for="item in regionList.length" :key="item">
							<text>{{regionList[item-1]}}</text>
						</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		<uni-drawer ref="distanceDrawer" mode="right" :mask-click="true" @change="change($event,'distanceDrawer')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="drawer-title">{{distanceTitle}}</view>
					<view @click="selectedItem(item, 'distanceDrawer')" class="info-content" v-for="item in distanceList.length" :key="item">
						<text>{{distanceList[item-1].name}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		<uni-drawer ref="insuranceDrawer" mode="right" :mask-click="true" @change="change($event,'distanceDrawer')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="drawer-title">{{insuranceTitle}}</view>
					<view @click="selectedItem(item, 'insuranceDrawer')" class="info-content" v-for="item in insuranceList.length" :key="item">
						<text>{{insuranceList[item-1].name}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		
		<!-- popup -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="title" style="margin-top: 17px;text-align: center">报价联系人</view>
				<!-- <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"> -->
					<view class="list-cont" style="height: 300px;">
					     <scroll-view style="margin-top: 10px; display: flex; flex-direction: column;" scroll-y="true" scroll-with-animation="true">
												  <view class="cell" v-for="(item,index) in connectList" :key="index" @click="selectedConnect(item)">
												  	<view class="cell_content" style="height: 50px;">
												  		<view class="cell_title" style="flex:1;">
															{{item.name}}
												  		</view>
												  		<view class="cell_title">
															{{item.phone}}
												  		</view>
												  	</view>							
													<view class="cell_line"></view>
												  </view>
					     </scroll-view>
					</view>
				<!-- </view> -->
				<view class="enter_btn" @click="addConnect()" style="margin: 0px 14px 14px 14px;">新增联系人</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {getContactList, addQuotation, getQuotation, updateQuotation, getDistance, getSituation} from '@/api/secondhandCar.js'
	
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				
				edit: false,
				
				objectData: {},
				quotationInfo: {},
				
				quotation_price:'', // 报价
				deposit_price: '',	// 订金
				quotation_contacts: '',
				quotation_contacts_id: '', //报价联系人id
				distance:'',
				distance_id: '',
				store_protection_id:'',
				store_protection:'',
				invoicing: '', //开票类型1：普票 2：增票
				invoice: '', //发票 1：店票 2：汽贸票
				procedures: '', //手续 1：票证随车 2：票证不随车
				collection_conditions: '', //提车要求 1：本人到店 2：本人不到店
								
				distanceList: ["100公里内", "300公里内", "500公里内", "500公里外"],
				insuranceList: ['不店保', '交强险', '商业险', '其他附加险'],
				connectList: [],	//	联系人列表
				
				offerList: [{},{},{},{}],
				notes:["","", "","", ""],
				
				// 抽屉
				showRight: false,
				
				// 抽屉信息
				regionList: ["东区", "南区", "西区", "北区"],

				// 抽屉结果
				regionResult: "",
				distance: "",
				insurance: "",
				
				// 抽屉title
				regionTitle:'车源所在地',
				distanceTitle: "自提距离",
				insuranceTitle: '店保情况',

				shouxuList: [{text: '票证随车',value: '1'}, {text: '票证不随车',value: '2'}],
				
				faPiaoList: [{text: '店票',value: '1'}, {text: '汽贸票',value: '2'}],
				
				kaipiaoList: [{text: '普票',value: '1'}, {text: '增票',value: '2'}],
				
				requestList: [{text: '本人到店',value: '1'}, {text: '无需本人',value: '2'}],
			}
		},
		
		onShow() {
			getContactList(this.objectData.users_id )
			.then(res => {
				if (res.code == 0) {
					this.connectList = res.data
				}
			})
			.catch(e => {
				
			})
		},
		
		onLoad(options) {
			let data = options
			
			this.edit = data.edit
			
			if (this.edit == 1) {
				this.quotation_id = data.quotation_id
			}

			this.objectData.model_name = data.model_name
			this.objectData.guide_price = data.guide_price
			this.objectData.budget_money = data.budget_money
			this.objectData.car_search_id = data.car_search_id


			// 获取距离
			
			getDistance()
			.then(res => {
				this.distanceList = res.data;
			})
			
			// 获取店保
			getSituation()
			.then(res => {
				this.insuranceList = res.data
			})
			
			try {
				const value = uni.getStorageSync('login');
				let userid = value.id
				this.objectData.users_id = userid
				
				// 
				
				if (this.edit == "1") {
					let params = {
						"id" : this.quotation_id,
						"users_id": userid
					}
					
					getQuotation(params)
					.then(res => {
						let code = res.code
						if (code == 0) {
							this.quotationInfo = res.data
							let quto = res.data
							let quotation = res.data.quotation
							
							this.quotation_price = quto.quotation_price
							this.deposit_price = quto.deposit_price
							// this.quotation_contacts_id = quto.quotation_contacts
							this.distance = quto.distance
							// this.distance_id = quto.distance_id
							// this.store_protection_id = quto.store_protection_id
							this.store_protection = quto.store_protection
							this.invoice = quto.invoice + ''
							this.invoicing = quto.invoicing + ''
							this.procedures = quto.procedures + ''
							this.collection_conditions = quto.collection_conditions + ''
							
							if (quotation.name) {
								this.quotation_contacts = quotation.name + " " + quotation.phone
								// this.quotationInfo.connectInfo =  quotation.name + " " + quotation.phone
							}
						}
					})
				} else {

				}

				// 
				getContactList(userid)
				.then(res => {
					if (res.code == 0) {
						this.connectList = res.data
						
						
					}
				})
				.catch(e => {
					
				})
				
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			
			enter() {
				this.quotationInfo.car_search_id = this.objectData.car_search_id
				this.quotationInfo.users_id = this.objectData.users_id
				
				this.quotationInfo.quotation_price = this.quotation_price
				this.quotationInfo.deposit_price = this.deposit_price
				this.quotationInfo.distance = this.distance
				this.quotationInfo.store_protection = this.store_protection
				this.quotationInfo.invoicing = this.invoicing
				this.quotationInfo.invoice = this.invoice
				this.quotationInfo.procedures = this.procedures
				this.quotationInfo.collection_conditions = this.collection_conditions
				
				
				if (this.edit == 1) {
					updateQuotation(this.quotationInfo)
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: "报价更新成功",
								icon: 'none'
							});
							
							clearTimeout(this.timer);  //清除延迟执行
							this.timer = setTimeout(()=>{   //设置延迟执行
							
							uni.navigateBack()
							
							},1000);
						}
					})
					
					
				} else {
					
					addQuotation(this.quotationInfo)
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: "报价成功",
								icon: 'none'
							});
							
							clearTimeout(this.timer);  //清除延迟执行
							this.timer = setTimeout(()=>{   //设置延迟执行
							
							uni.navigateBack()
							
							},1000);
						}
					})
				}
			},
			
			limitQuotation(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.quotation_price = e.target.value
				})
			},
			
			limitDeposit(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.deposit_price = e.target.value
				})
			},
			
			addConnect() {
				uni.navigateTo({
					url: '/pages/home/connect/addConnect'
				})
			},
			
			selectedConnect(item) {
				console.log('----------------')
				this.quotationInfo.quotation_contacts_id = item.id
				this.quotation_contacts = item.name + " " + item.phone
				this.$refs.popup.close()
			},
			
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			
			selectClick(inta) {
				if (inta == 1) {
					
				}
			},
			
			checkboxBtn() {

			},
			
			// 抽屉
			
			selectedItem(item, e) {
				if (e == 'regionDrawer') {
					this.regionResult = this.regionList[item-1]	
				}
				else if (e == 'distanceDrawer') {
					let objc = this.distanceList[item-1]
					this.quotationInfo.distance = objc.name
					this.distance = objc.name
					this.quotationInfo.distance_id = objc.id
					
				} else if (e == 'insuranceDrawer') {
					let objc = this.insuranceList[item-1]
					this.quotationInfo.store_protection = objc.name
					this.store_protection = objc.name
					this.quotationInfo.store_protection_id = objc.id
				}
				
				this.closeDrawer(e)
				
			},
			
			enterCustomJob() {
				if (this.customJobTitle) {
					this.jobTitle = this.customJobTitle
				}
				this.closeDrawer('regionDrawer')
			},
			
			openDrawer(e, type) {
				this.$refs[e].open()
			
			},
			
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			
		}
	}
</script>

<style>
	
	.checkoutbox {
		width: 57px;
		height: 27px;
		background: #EDF1FF;
		opacity: 1;
		border-radius: 14px;
	}
	
	.popup-content {
		display:  flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 300px;
		background-color: #fff;
	}
	
	
	.textarea {
		margin-bottom: 50px;
		margin-left: 14px;
		margin-right: 14px;
		height: 64px;
		border: 1px solid lightgray;
		border-radius: 7px;
	}
	
	.selected_btn {
		background: #EDF1FF;
		opacity: 1;
		border-radius: 14px;
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
		padding: 5px 14px 5px 14px;
	}
	
	.normal_btn {
		border: 1px solid lightgray;
		border-radius: 14px;
		
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
		padding: 5px 14px 5px 14px;
	}
	
	/* 抽屉 */
	.drawer-title {
		margin-bottom: 10px;
		width: 100%;
		height: 50px;
		background-color: #0E59EA;
		border-radius: 0px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: white;
		opacity: 1;
		padding-left: 15px;
		display: flex;
		align-items: center;
		/* padding-top: 40px; */
	}
	
	.job-custom {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.job-custom-btn {
		margin-left: 5px;
		margin-right: 15px;
		width: 50px;
		height: 30px;
		background: #0E59EA;
		border-radius: 7px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.example-body {
		padding: 10px;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	/*  处理抽屉内容滚动 */
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	
	.info-content {
		padding-left: 15px;
		padding-bottom: 25px;
		display: flex;
		align-items: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000026;
		opacity: 1;
	}
	.close {
		padding: 10px;
	}
	
	/**/
	
	.content_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
		text-align: right;
	}
	
	.small_text {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		opacity: 1;
		text-align: right;
	}
	
	.unit_text {
		margin-left: 5px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FD1212;
		opacity: 1;
	}
	
	.cell_title {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.cell_right {
		display: flex;
		flex-direction: row; 
		align-items: center;
	}
	
	.cell_line {
		margin-left: 15px;
		margin-right: 15px;
		border: 1px solid #000000;
		opacity: 0.04;
	}
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.cell {
		display: flex;
		flex-direction: column;
		/* background-color: red; */
	}
	
	.cell_content {
		display: flex;
		flex-direction: row;
		height: 60px;
		align-items: center;
		margin-left: 14px;
		margin-right: 14px;
		/* background-color: red; */
	}
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.up_card {
		margin-top: -10px; 
		background-color: white;
		/* height:100px; */
		height: auto;
		width:100%; 
		border-radius: 14px 14px 0px 0px;

	}
	
	.down_card {
		margin-top: 10px; 
		background-color: white;
		/* height:100px; */
		height: auto;
		width:100%; 
	
	}
	
	.enter_btn {
		background: #0E59EA;
		border-radius: 7px;
		height: 45px;
		background: #0E59EA;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}
	
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 150rpx;
		/* margin-top: 34rpx; */
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		/* background: url(@/static/bac-small.png); */
		background: url(@/static/bac-small.png);
		background-size: 100% 100%; 
		/* 背景图片能够显示全 */
	}
	
	.page-wraper {
		position: absolute;
		top: 0px;
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
	
</style>